<template>
  <nm-container>
    <el-form label-width="80px" :inline="true" style="background:white; padding:20px">
      <el-form-item label="证件号" prop="station_id">
        <el-input v-model="form.cardId" clearable />
      </el-form-item>
      <el-form-item label="票号" prop="station_id">
        <el-input v-model="form.startTicketNum" clearable />
      </el-form-item>
      <el-button type="primary" @click="inquire">查询</el-button>
      <el-button type="primary" @click="fetch">取票</el-button>
    </el-form>
    <div class="Dh_table">
      <el-table highlight-current-row :max-height="height" @current-change="handleCurrentChange" ref="topictable" :data="getList" border align="center" :header-cell-style="{ 'text-align': 'center', 'font-weight': 'bold', color: '#030202' }" :cell-style="{ 'text-align': 'center' }" style="width: 100%;text-align: center;" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="orderCode" label="订单号"> </el-table-column>
        <el-table-column prop="endTicketNum" label="分号"> </el-table-column>
        <el-table-column prop="currentTicketNum" label="票种">
          <template slot-scope="scope">
            <el-select v-model="scope.row.ticketType" placeholder="请选择" disabled>
              <el-option v-for="item in ticketType" :key="item.id" :label="item.ticekt_type_name" :value="item.id"> </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="busDate" label="日期">
          <template slot-scope="scope">
            <span>{{ formatDate(scope.row.busDate) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="startTime" label="时间"> </el-table-column>
        <el-table-column prop="startStationName" label="上车站"> </el-table-column>
        <el-table-column prop="busNum" label="班次"> </el-table-column>
        <el-table-column prop="seatNum" label="座位"> </el-table-column>
        <el-table-column prop="targetName" label="到达站"> </el-table-column>
        <el-table-column prop="ticketPrice" label="票价"> </el-table-column>
        <el-table-column prop="passengerName" label="乘车人"> </el-table-column>
        <el-table-column prop="remainTicket" label="售票员"> </el-table-column>
      </el-table>
    </div>

    <!-- <el-pagination background layout="prev, pager, next" :total="total / 10" /> -->
  </nm-container>
</template>
<script>
import { mixins } from 'netmodular-ui'
import page from './page'
import $ from '../../utils/jquery-3.5.1.min'

const api = $api.dispatch.fetch_ticket

export default {
  name: page.name,
  mixins: [mixins],
  data() {
    return {
      form: {
        startTicketNum: '',
        cardId: '',
      },
      currentTicketNum: '',
      getList: [],
      ticketType: [],
      total: '',
      height: 400,
      id: '',
      status: false,
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.height = window.innerHeight - this.$refs.topictable.$el.offsetTop - 150
    })
    this.getType()
  },
  methods: {
    handleCurrentChange(data) {
      this.currentTicketNum = data.currentTicketNum
      this.id = data.id
      if (data.status == 0) {
        this.status = true
      } else {
        this.status = false
      }
    },
    handleSelectionChange(val) {
      console.log(val)
    },
    //获取票种类型
    getType() {
      api.ticketTypeQuery().then((res) => {
        this.ticketType = res.rows
      })
    },
    // 读取身份证
    inquire() {
      const that = this
      $.ajax({
        type: 'get',
        async: false,
        url: 'http://localhost:5000/Card/ReadIDCard',
        dataType: 'jsonp',
        success: function (json) {
          if (json.idCardInfo) {
            that.form.cardId = json.idCardInfo.idCard
            api.getorderinfo(that.form).then((res) => {
              that.getList = res
            })
          } else {
            if (that.form.startTicketNum != '' && that.form.idCard != '') {
              api.getorderinfo(that.form).then((res) => {
                that.getList = res
              })
            } else {
              that.getList = []
              that.$message({
                message: '请输入查询条件',
                type: 'warning',
              })
            }
          }
        },
        error: function (e) {
          that.$message.warning('请开启读卡服务后再读取身份证')
        },
      })
    },

    //取票
    fetch() {},
    // 日期格式化
    formatDate(value) {
      let date = new Date(value)
      let y = date.getFullYear()
      let MM = date.getMonth() + 1
      MM = MM < 10 ? '0' + MM : MM
      let d = date.getDate()
      d = d < 10 ? '0' + d : d
      return y + '-' + MM + '-' + d
    },
  },
}
</script>

<style></style>
